<template>
	<div style="padding-bottom:4rem;">
		<div style="width: 40%;padding: 1rem 5% 1rem 0;">
			<van-tabs v-model="activeName" color="#01CBE2" animated>
				<van-tab title="全部" title-style="font-size:20px;" name="a">
				</van-tab>
				</van-tab>
				<van-tab title="关注" title-style="font-size:20px;" name="b"> </van-tab>
			</van-tabs>
		</div>
		<div :class="activeName =='a' ? 'show' : 'hidden'">
			<div style="text-align: center;">
				<van-swipe :autoplay="3000" style="height: 100%;width:94% ;border-radius: 20px;margin: 0 auto;">
					<van-swipe-item v-for="(item,i) in carouselItems" :key="i">
						<router-link to="">
							<van-image width="100%" :src="APIDomainName + item.img"></van-image>
						</router-link>
					</van-swipe-item>
				</van-swipe>
			</div>
			<div style="width: 90%;margin: 0 auto;margin-top: 1rem;">
				<div style="font-size: 24px;">
					热门游戏论坛
				</div>
				<div v-for="(item,i) in forumproduct" :key="i">
					<div style="display: flex;margin-top: 1rem;justify-content: space-between;align-items: center;">
						<div style="display: flex;" @click="onForumDetail(item.product_id)">
							<img :src="APIDomainName +item.pic"
								style="width: 5.5rem;border-radius: 25px;height: 5.5rem;" alt="">
							<div style="display: flex;align-items: center;">
								<div style="position: relative;">
									<div style="margin-left: 0.5rem;font-size: 20px;">
										{{item.title}}
									</div>
									<div style="margin-top: 1rem;margin-left: 0.5rem;font-size: 15px;color: #989898;">
										{{item.concern}}
									</div>
								</div>
							</div>
						</div>
						<div @click="onClickConcern(item.product_id)">
							<div v-if="is_checked.indexOf(item.product_id)!=-1">
								<button  style="width: 5.6rem;height: 2.4rem;color: #14c5cd;border-radius: 30px;font-size: 16px;
							background-color: #f3f3f3;border:0;font-weight: bold;color: #989898;">
									已关注
								</button>
							</div>
							<div v-else>
								<button style="width: 5.6rem;height: 2.4rem;color: #14c5cd;border-radius: 30px;font-size: 16px;
						background-color: #ecfafb;border: 0;font-weight: bold;">
									关注
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div :class="activeName =='b' ? 'show' : 'hidden'">
			<div v-if="forumList==0">
				<van-empty class="custom-image" image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
					description="暂时没有关注" />
			</div>
			<div v-for="(item,index) in forumList" :key="index" v-else>
				<div style="background-color: #F6F7F9;height: 0.5rem;"></div>
				<div style="width: 90%;padding: 1rem 5% 1rem 5%;">
					<div style="display: flex;align-items: center;justify-content: space-between;">
						<div style="display: flex;align-items: center;">
							<div>
								<img :src="APIDomainName + item.avatar" style="border-radius: 50%;width: 3.5rem;"></img>
							</div>
							<div style="margin-left: 1rem;">
								<div style="display: flex;">
									<div style="font-weight: bold;margin-right: 0.3rem;">{{item.name}}</div>
									<div>
										<img width="35%" src="@/assets/dr.png"></img>
									</div>
								</div>
								<div style="color: #BABFC2;">
									{{shelfTime(item.date)}} · <span style="color: #01CBE2;font-weight: bold;">
										{{item.title}}
									</span>
									</span>
								</div>
							</div>
						</div>
						<div>
							<img style="width: 3rem;" src="@/assets/sign.png" @click="showPopup"></img>
						</div>
					</div>
					<div style="margin:0.5rem 0 1rem 0;">{{item.detail}}</div>
					<div>
						<img :src="APIDomainName + item.pic" alt=""
							style="border-radius: 1rem;width: 100%;height: 25%;">
					</div>
					<div
						style="width:80%;margin:0 10% 0 10%;display: flex;color: #878C92;align-items: center;margin-top: 1rem;">
						<div style="display: flex;align-items: center;width: 43%;"><img src="@/assets/share.png"
								style="width: 2rem;" alt="" @click="onForward(item.id,item.title,item.picture)">
							<!-- <div style="margin-left: 0.5rem;">12</div> -->
						</div>
						<div style="display: flex;align-items: center;width: 44%;" @click="onReviewDetail(item.id)"><img src="@/assets/review.png"
								style="width: 2rem;" alt="">
							<div style="margin-left: 0.5rem;">{{item.count}}</div>
						</div>
						<div style="display: flex;align-items: center;width: 13%;" @click="onClick(item.id,index)">
							<div v-if="like.indexOf(item.id)!=-1"><img src="@/assets/likebule.png" style="width: 2rem;"
									alt="" /></div>
							<div v-else><img src="@/assets/like.png" style="width: 2rem;" alt="" /></div>
							<div style="margin-left: 0.5rem;">{{item.likeit}}</div>
						</div>
					</div>
				</div>
			</div>
			<van-popup v-model="show" round position="bottom" :style="{ height: '17%' }">
				<div style="display: flex;align-items: center;margin-top: 1rem;margin-left: 2rem;">
					<van-icon name="share-o" size="30" />
					<div style="margin-left: 1rem;font-size: 18px;">分享</div>
				</div>
				<van-button block @click="hiddenPopup"
					style="background-color: #F8F8F8; color: #666666;width: 90%;margin: 0 auto; font-size: 18px;margin-top: 1rem;border-radius: 10px;">
					取消
				</van-button>
			</van-popup>
			<van-popup v-model="showforward" style="width: 80%;border-radius: 20px;padding: 1rem 1rem 2rem;">
				<van-field v-model="remark" rows="5" autosize type="textarea" placeholder="写下你的想法" />
				<div style="background-color: #F5F7F8;padding: 1rem;margin: 0 1rem;border-radius: 10px;">
					<div><span style="color: #666;">//</span>@{{user.name}}: <span style="color: #C7CBCE;">转发动态</span>
					</div>
					<div style="background-color: #ccc;height: 0.07rem;margin-top: 1rem;"></div>
					<div style="display: flex;margin-top: 1rem;">
						<van-image width="30%" :src="APIDomainName + picture" radius="10px"
							style="width: 30%;height: 30%;"></van-image>
						<div style="margin-left: 1rem;">
							<div style="font-size: 18px;">
								@{{review.name}} <span style="color: #B9BEC1;">评价了</span>{{title}}
							</div>
							<div style="margin-top: 1rem;">{{shelfTime(review.date)}}</div>
						</div>
					</div>
					<div style="color: #666;margin-top: 1rem;">
						{{review.detail}}
					</div>
				</div>
				<div style="width: 100%;">
					<van-button size="large"
						style="margin-left: 78%;background-color: #14C5CD; color: #ffffff;width: 20%;font-weight: bold;font-size: 16px;border: 0;margin-top: 1rem;border-radius: 10px;height: 2.5rem;"
						@click="onPublish()">
						发布
					</van-button>
				</div>
			</van-popup>
		</div>
	</div>
</template>

<script>
	import * as Tools from "@/utils/tools.js"
	import {
		getForumListAPI,
		ischeckedForumAPI,
		addConcernForumAPI,
		deleteConcernForumItemAPI,
		reviewConcernForumAPI,
		forumSearchConcernListAPI,
		addLikeForumAPI,
		deleteLikeForumAPI,
		searchReviewConcernForumAPI,
		getforwardAPI
	} from '@/api/forum.js';
	import {
		getUserLocal,
	} from "@/utils/auth.js"
	export default {
		data() {
			return {
				activeName: 'a',
				carouselItems: [],
				forumproduct: [],
				forumList: [],
				is_checked: [],
				show: false,
				like: [],
				showforward:false,
				remark:'',
				user:{},
				review:{},
				picture:'',
				title:'',
			}
		},
		created() {
			this.getList();
			this.onSearch();
			this.reviewConcernForum();
		},
		mounted() {
			//初始页面数据
			this.user = getUserLocal();
		},
		methods: {
			onPublish() {
				this.showforward = false;
				this.$toast({
					message: '发布成功',
					icon: 'success',
				});;
			},
			onForward(id,title,picture) {
				this.title=title;
				this.picture=picture;
				this.showforward = true;
				getforwardAPI(id).then(result => {
					this.review = result.data;
					// console.log(result.data)
				}).catch(() => {});
			},
			onReviewDetail(id) {
				this.$router.push({
					name: "forumReviewDetail",
					params: {
						id
					},
				});
			},
			onClickConcern(id) {
				let list = this.is_checked;
				if (list.indexOf(id) == -1) {
					// 加到数组中
					this.is_checked.push(id);
					let params = {
						product_id: id,
					}
					//2.使用封装后的接口,注意：接口有参数
					addConcernForumAPI(params).then(result => {
						// this.$toast(result.msg);
						this.reviewConcernForum();
					}).catch(() => {});
				} else {
					for (var i in list) {
						if (this.is_checked[i] == id) {
							this.is_checked.splice(i, 1);
						}
						let ids = id;
						deleteConcernForumItemAPI(ids).then(result => {
							// this.$toast(result.msg);
							this.reviewConcernForum();
						}).catch(() => {});
					}
				}
				
			},
			onSearch() {
				this.is_checked = [];
				forumSearchConcernListAPI().then((result) => {
					// console.log(result.data);
					result.data.forEach(item => {		
						this.is_checked.push(item.product_id) ;
						// console.log(this.is_checked);
					}); //数据的遍历
				});
			
			},
			onShare() {
				this.$toast("分享成功");
				this.show = false;
			},
			showPopup() {
				this.show = true;
			},
			hiddenPopup() {
				this.show = false;
			},
			shelfTime(i) {
				let date = new Date(i);
				return Tools.dateFormat(date, "yyyy年MM月dd日");
			},
			getList() {
				getForumListAPI().then((result) => {
					// console.log(result);
					this.carouselItems = result.data.carouselItems; //轮播项
					this.forumproduct = result.data.forumproduct;
				});
			},
			onForumDetail(id) {
				this.$router.push({
					name: 'forumDetail',
					params: {
						id
					}
				});
			},
			reviewConcernForum() {
				reviewConcernForumAPI().then(result => {
					// console.log(result.data)
					this.forumList = result.data;
					this.like = [];
					searchReviewConcernForumAPI().then(result => {
						console.log(result);
						result.data.forEach(item => {
							this.like.push(item.id);
						});
					}).catch(() => {});
				}).catch(() => {});
				
			},
			onClick(id, index) {
				let list = this.like;
				if (list.indexOf(id) == -1) {
					// 加到数组中
					this.forumList[index].likeit +=1;
					this.like.push(id);
					let data = {
						review_id: id,
					}
					//2.使用封装后的接口,注意：接口有参数
					addLikeForumAPI(data).then(result => {
						this.$toast(result.msg);
					}).catch(() => {});
					
				} else {
					this.forumList[index].likeit -=1;
					for (var i in this.like) {
						if (this.like[i] == id) {
							this.like.splice(i, 1);
						}
						let ids = id;
						deleteLikeForumAPI(ids).then(result => {
							this.$toast(result.msg);
						}).catch(() => {});
					}
				}
			},
		},
	}
</script>

<style>
	.show {
		display: block;
	}

	.hidden {
		display: none;
	}

	.custom-image .van-empty__image {
		width: 100px;
		height: 100px;
		margin-top: 5rem;
	}
</style>
